<template>
	<gui-page ref="guipage" :apiLoadingStatus="apiLoadingStatus" :refresh="refresh" @reload="reload"
		:isLoading="pageLoading" :loadmore="true" @loadmorefun="loadData">
		<view class="main" slot="gBody">
			<view class="list">
				<view class="item" v-for="(item,index) in dataList" @click="jumpDetails(item)">
					<view class="top bot_line">
						<view class="title f28 qoverDot" :class="{ 'read': item.isRead == 0}">
							{{item.title}}
						</view>
						<view class="date f28">
							{{item.createTime}}
						</view>
					</view>
					<view class="con qoverDot2 f22">
						{{$u.richText(item.content)}}
					</view>
					<view class="show_detail">
						点击查看详情>>
					</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin'])
		},
		data() {
			return {
				refresh: true,
				query: {
					pageNum: 1,
					pageSize: 10
				},
				dataList: [],
				noData: false,
				pageLoading: false,
				apiLoadingStatus: false
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			reload() {
				this.query.pageNum = 1;
				this.loadData(1);
			},
			loadData(isReload) {
				if (this.query.pageNum == 1 && !isReload) {
					this.pageLoading = true;
				}
				this.$api.getNotice(this.query).then(res => {
					if (res.code == 200) {
						var resultArr = res.data;
						let total = Math.ceil(res.total / this.query.pageSize);
						if (this.query.pageNum >= 2) {
							this.dataList = this.dataList.concat(resultArr);
							// 加载完成后停止加载动画
							this.$refs.guipage.stoploadmore();
							// 假定第3页加载了全部数据，通知组件不再加载更多
							// 实际开发由接口返回值来决定
							if (this.query.pageNum >= total) {
								this.$refs.guipage.nomore();
							}
						}
						// 第一页 有可能是第一次加载或者刷新
						else {
							this.dataList = [];
							this.dataList = resultArr;
							this.pageLoading = false;
							if (resultArr.length <= 0) {
								this.noData = true;
							}
							// 刷新
							if (isReload) {
								this.$refs.guipage.endReload();
							}
						}
						this.query.pageNum++;
						this.apiLoadingStatus = false;
					} else {
						this.$u.msg(res.msg)
					}

				})
			},
			jumpDetails(item) {
				if (item.isRead == 0) {
					item.isRead = 1;
				}
				this.$u.to(`/pages/announcement/details?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 30rpx;
	}

	.list {
		width: 100%;

		.top {
			width: 100%;
			display: flex;
			height: 84rpx;
			line-height: 84rpx;

			.title {
				flex: 1;
				position: relative;
				padding-left: 20rpx;

				&.read::after {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 10rpx;
					height: 10rpx;
					border-radius: 5rpx;
					background: linear-gradient(145deg, #7EC1FF 0%, #0A60FF 100%);
				}
			}

			.date {
				width: 250rpx;
				text-align: right;
				overflow: hidden;
			}
		}

		.item {
			padding: 0 25rpx;
			width: 690rpx;
			height: 240rpx;
			background: #FFFFFF;
			box-shadow: 0px 0 10rpx 1rpx rgba(207, 212, 215, 0.5);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-bottom: 33rpx;

			.con {
				line-height: 150%;
				color: #9B9B9B;
				margin-top: 20rpx;
			}
		}
	}

	.show_detail {
		font-size: 22rpx;
		text-align: right;
		margin-top: 30rpx;
	}
</style>